<template>
  <div>
    <swiper :options="swiperOption" loop="true">
      <swiper-slide>
        <img class="w-100" src="../assets/index/index-swiper/1.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/index/index-swiper/2.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/index/index-swiper/3.jpg" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/index/index-swiper/4.jpg" />
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right" slot="pagination"></div>
    </swiper>
    <!-- end of 轮播图 -->

    <div class="nav-icons text-center bg-white pt-2 mt-3 d-flex flex-wrap text-center text-dark">
      <div class="d-flex flex-wrap">
        <a href class="nav-item my-3">
          <i class="sprite sprite-news"></i>
          <div>爆料站</div>
        </a>
        <a href class="nav-item my-3">
          <i class="sprite sprite-practice"></i>
          <div>故事站</div>
        </a>
        <a href class="nav-item my-3">
          <i class="sprite sprite-affair"></i>
          <div>周边商城</div>
        </a>
        <a href class="nav-item my-3 border-none">
          <i class="sprite sprite-mall"></i>
          <div>体验服</div>
        </a>
        <a href class="nav-item my-2">
          <i class="sprite sprite-start"></i>
          <div>新人专区</div>
        </a>
        <a href class="nav-item my-2">
          <i class="sprite sprite-honour"></i>
          <div>荣耀·传承</div>
        </a>
        <a href class="nav-item my-2">
          <i class="sprite sprite-community"></i>
          <div>同人社区</div>
        </a>
        <a href class="nav-item my-2 border-none">
          <i class="sprite sprite-base"></i>
          <div>王者营地</div>
        </a>
        <a href class="nav-item my-2">
          <i class="sprite sprite-echart"></i>
          <div>公众号</div>
        </a>
        <a href class="nav-item my-2">
          <i class="sprite sprite-edition"></i>
          <div>版本介绍</div>
        </a>
      </div>

      <div class="retract-box bg-light py-2 fs-sm">
        <span class="retract mr-1"></span>收起
      </div>
    </div>
    <!-- end of 图标模块 -->

    <m-list-card icon="menu" title="新闻咨询" :categories="newsCats">
      <template #items="{category}">
        <router-link 
          :to="`/articles/${items._id}`" 
          tag="div" 
          class="pt-3 pb-2 title-item" 
          v-for="(items ,i) in category.newsList" :key="i"
        >
          <span style="color:#464f73">[{{items.categoryName}}]&nbsp;&nbsp;|</span>
          <span class="title ml-2">{{items.title}}</span>
          <span
            class="date text-grey-1"
            style="position: absolute; right:0px"
          >{{items.updatedAt | date}}</span>
        </router-link>
      </template>
    </m-list-card>
    <!-- end of 新闻咨询 -->

    <m-list-card icon="card-hero" title="英雄列表" :categories="herosCats">
      <img src="../assets/index/heros-card.jpg" />
      <template #items="{category}">
        <div class="d-flex flex-wrap">
          <router-link
            tag="div"
            :to="`/heroes/${hero._id}`"
            class="pt-3 pb-2 px-1 text-center"
            style="width:20%;"
            v-for="(hero ,i) in category.heroList"
            :key="i"
          >
            <img :src="hero.avatar" style="width:100%;"  alt="" />
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <!-- end of 英雄列表 -->

    <m-card icon="news" title="图文攻略"></m-card>
    <!-- end of 图文攻略 -->
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    }
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 1,
        loop: true,
        pagination: {
          el: ".pagination-home",
          clickable: true
        }
      },
      newsCats: [],
      herosCats: []
    };
  },
  created() {
    this.fetchNewsCats();
    this.fetchHerosCats();
  },
  methods: {
    async fetchNewsCats() {
      const response = await this.$http.get("/news/list");
      this.newsCats = response.data;
    },
    async fetchHerosCats() {
      const response = await this.$http.get("/heroes/list");
      this.herosCats = response.data;
    }
  }
};
</script>

<style lang="scss" >
@import "../assets/scss/variables.scss";

.pagination-home {
  padding-right: 1em;

  .swiper-pagination-bullet {
    display: inline-block;
    height: 0.6923rem;
    width: 0.6923rem;
    border-radius: 2px;
    background-color: #ffffff;
    opacity: 0.8;
  }

  .swiper-pagination-bullet-active {
    background-color: #4b67af;
  }
}
.nav-icons {
  border-top: 1px #d4d9de solid;
  border-bottom: 1px #d4d9de solid;
  margin-bottom: 0.7692rem;
  .nav-item {
    display: block;
    height: 3.8462rem;
    width: 25%;
    font-size: 0.9231rem;
    border-right: 1px solid #d4d9de;
    &:nth-child(4n) {
      border-right: none;
    }
    .i {
      width: 100%;
      height: 100%;
    }
  }

  .retract-box {
    width: 100%;
  }
  .retract {
    background: url("../assets/index/index.png") no-repeat 38.577% 52.076%;
    background-size: 375px 455px;
    display: inline-block;
    width: 0.7692rem;
    height: 0.7692rem;
  }
}
</style>